﻿@{
    Layout = null;
}
<meta charset="UTF-8" />
<!--生成设备虚拟窗口便于开发-->
<meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no" />
<!--解决浏览器兼容性-->
<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title style="text-align:center">验证手机号码</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
@*<script src="~/Scripts/jquery.js"></script>*@
<link href="~/Content/MarketCss/animate.min.css" rel="stylesheet" />

<style>
    * {
        padding: 0;
        margin: 0;
        font-family: 微软雅黑;
        list-style: none;
    }

    p {
        margin: 0 auto 10px;
    }

    .phone {
        position: absolute;
        width: 90%;
        height: 100%;
        background: url("/Content/webImgs/Market/redPacket/redPacket-03.jpg");
        background-size: 100% 100%;
        padding: 0 5%;
    }

        .phone > p:nth-child(1) {
            font-size: 23px;
            color: whitesmoke;
            margin-top: 20px;
        }

        .phone > p:nth-child(2) {
            color: whitesmoke;
        }

        .phone .phone-num {
            display: flex;
            align-items: center;
            background-color: white;
            border-radius: 5px;
            margin-bottom: 10px;
            height: 40px;
        }

            .phone .phone-num > span {
                padding: 5px;
            }

            .phone .phone-num > input {
                flex: 1;
                border: none;
                height: 100%;
                border-radius: 5px;
            }

        .phone .sure {
            display: block;
            text-decoration: none;
            background-color: #FFCC00;
            text-align: center;
            height: 40px;
            color: #763401;
            line-height: 40px;
            font-size: 25px;
            border-radius: 5px;
            margin: 20px auto;
        }

        .phone .user-info {
            border: 1px solid white;
            border-radius: 10px;
            width: 100%;
            height: 180px;
            overflow: hidden;
        }

            .phone .user-info > ul {
                margin: 0;
                padding: 0;
            }

                .phone .user-info > ul > li {
                    display: flex;
                    margin: 10px auto 20px;
                    align-items: center;
                }

                    .phone .user-info > ul > li > img {
                        width: 35px;
                        height: 35px;
                        border-radius: 40px;
                        margin-left: 10px;
                    }

                    .phone .user-info > ul > li > span {
                        color: white;
                    }
</style>

<div class="phone">
    <p>验证手机号：</p>
    <p>为您的红包准确到账，请验证手机号码。</p>
    <div class="phone-num">
        <span>+86</span>
        <input type="text" placeholder="请填写手机号码" autofocus>
    </div>
    <div class="phone-num">
        <input type="text" placeholder="请输入短信验证码" autofocus id="SMS">
        <input type="button" autofocus style="color: #826A50" value="获取验证码">
    </div>
    <a class="sure" href="/Market/RedPack3"> 确定 </a>
    <div class="user-info">
        <ul>
            <li>
                <img src="~/Content/webImgs/Market/redPacket/redPacket-04B.png" />
                <span style="margin-left: 10px">user info</span>
                <span style="flex: 1"></span>
                <span style="margin-right: 10px">领取了包1</span>
            </li>
            <li>
                <img src="~/Content/webImgs/Market/redPacket/redPacket-04B.png" />
                <span style="margin-left: 10px">user info</span>
                <span style="flex: 1"></span>
                <span style="margin-right: 10px">领取了包1</span>
            </li>
            <li>
                <img src="~/Content/webImgs/Market/redPacket/redPacket-04B.png" />
                <span style="margin-left: 10px">user info</span>
                <span style="flex: 1"></span>
                <span style="margin-right: 10px">领取了包1</span>
            </li>
            <li>
                <img src="~/Content/webImgs/Market/redPacket/redPacket-04B.png" />
                <span style="margin-left: 10px">user info</span>
                <span style="flex: 1"></span>
                <span style="margin-right: 10px">领取了包1</span>
            </li>
            <li>
                <img src="~/Content/webImgs/Market/redPacket/redPacket-04B.png" />
                <span style="margin-left: 10px">user info</span>
                <span style="flex: 1"></span>
                <span style="margin-right: 10px">领取了包1</span>
            </li>
           
        </ul>
    </div>
</div>
<script>
    //{
    //    "reason": "短信发送成功",
    //        "result": {
    //        "count": 1, /*发送数量*/
    //            "fee": 1, /*扣除条数*/
    //                "sid": "23d6bc4913614919a823271d820662af" /*短信ID*/
    //    },
    //    "error_code": 0 /*发送成功*/
    //}
    //中奖信息滚动
    ; (function ($) {
        $.fn.scrollTop = function (options) {
            var defaults = {
                speed: 30
            };
            var opts = $.extend(defaults, options);
            this.each(function () {
                var $timer;
                var scroll_top = 0;
                var obj = $(this);
                var $height = obj.find("ul").height();
                obj.find("ul").clone().appendTo(obj);
                obj.hover(function () {
                    clearInterval($timer);
                }, function () {
                    $timer = setInterval(function () {
                        scroll_top++;
                        if (scroll_top > $height) {
                            scroll_top = 0;
                        }
                        obj.find("ul").first().css("margin-top", -scroll_top);
                    }, opts.speed);
                }).trigger("mouseleave");
            })
        }
    })(jQuery);


    $(function () {
        getInfo();
        var num = /^1[1-9]\d{9}$/;
        $('.phone .phone-num').eq(1).children('input:nth-child(2)').click(function () {
            var that = this;
            var str = $(this).parent().prev().children('input').val();
            //获取滚动数据
            if (!num.test(str)) {
                $.L.msgError('请输入正确的手机号码');
            }
            else {

                var Num = 30;
                $(this).attr('disabled', 'disabled');
                var SMS = "";

                //发送验证码给手机
             
                function SendSMS(str, smsStr) {
                    $.ajax({
                        url: "/Market/SMSApi",
                        type: "GET",
                        dataType: "json",
                        async: false,
                        data: {
                            phoneNum: str
                        },
                        success: function (data) {
                            SMS = data;
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            $.L.msgError(XMLHttpRequest.status);
                            $.L.msgError(XMLHttpRequest.readyState);
                            $.L.msgError(textStatus);
                        }
                    });
                }

                //向手机发送验证码
                SendSMS(str, SMS);

                //输入手机号码   发送验证码  判断验证码是否正确
                $(".phone .sure").click(function () {
                    if ($("#SMS").val() == SMS) {
                        getPhone(str);
                    }
                    else {
                        $.L.msgError("请检查验证码!");
                    }

                });

                function time() {
                    Num--;
                    if (Num > 0) {
                        $(that).val(Num + '秒后重发');
                        var t = setTimeout(function () {
                            time();
                        }, 1000);

                    }
                    else {
                        clearTimeout(t);
                        $(that).val('获取验证码');
                        $(that).removeAttr('disabled');
                    }
                }
                time();
            }

        });
        $(".user-info").scrollTop({
            speed: 40,//数值越大 速度越慢
        });

        function getPhone(num) {
            $.ajax({
                type: "get",
                url: '/app/Market/ToReceive',
                data: {
                    AwardID: getUrlParam('Aid'),
                    Phone: num
                },
                success: function (data) {
                    //location.href = "/app/WebTemplate/WebTemplate1_3";
                }
            });
        }

        //获取滚动数据
        function getInfo() {
      
            $.ajax({
                type: "get",
                url: '/Market/GetTheWinning',
                data: {
                    pageIndex: "",
                    pageSize: 10,
                    sortField: "",
                    sortOrder: "",
                    key: ""
                },
                success: function (data) {
                    //console.log(data);
                },
                error: function () { }
            });
        }

    });

</script>




